<template>
	<view class="register">
		<view class="register-logo">
			<image :src="configDetail ? configDetail.logo : ''" mode=""></image>
		</view>
		<view class="register-form">
			<view class="form-lis bottom-border">
				<input type="number" maxlength="11" v-model="mobile"  placeholder="输入手机号码" placeholder-class="placeholder-input">
			</view>
			<view class="form-lis code-lis flow-space-between-center bottom-border">
				<input type="number" maxlength="6" v-model="captcha" placeholder="输入验证码" placeholder-class="placeholder-input">
				<view class="code-btn">
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"  @change="codeChange"></u-code>
					<button @tap="getCode">{{tips}}</button>
				</view>
			</view>
			<view class="form-lis bottom-border">
				<input type="number" maxlength="20" v-model="store_code" placeholder="输入推荐码" placeholder-class="placeholder-input">
			</view>
		</view>
		<view class="register-btn flow-center active" @click="savBtn">注册</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import $validate from '@/common/validate.js';
	export default {
		computed: {
			...mapState(['configDetail','userInfo','storeCode']), // vuex获取用户数据
		},
		name:'login',
		data() {
			return {
				tips: '',
				seconds: 60,
				mobile: '',
				captcha: '',
				store_code: '',
				limitclick:false,
			}
		},
		onLoad(options) {
			
		},
		onShow(){
			this.store_code = this.storeCode || '';
		},
		onUnload() {
			
		},
		methods: {
			backBtn(){
				// 返回上一页
				uni.navigateBack({
					delta: 1
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			// 注册
			savBtn: function() {
				let tit = '';
				let url = 'api/user/bindMobileAndStore';//小程序使用绑定手机号注册
				// #ifndef MP-WEIXIN
					// 其它平台注册接口
					url = 'api/user/register'
				// #endif
				if (!this.store_code)  tit = '请输入推荐码';
				if (!this.captcha) tit = '请输入验证码';
				if ($validate.checkMobile(this.mobile)) tit = $validate.checkMobile(this.mobile);
				if (!this.mobile)  tit = '请输入手机号';
				if(tit){
					uni.showToast({
						title: tit,
						icon:'none'
					})
					return;
				}
				let parmes = {
					mobile: this.mobile,
					captcha: this.captcha,
					code: this.captcha,
					store_code: this.store_code,
				}
				if(this.limitClickFun()) return;
				this.$H.post(url, parmes).then(res => {
					// #ifndef MP-WEIXIN
						// 注册接口过来的
						this.$store.commit('userToken', res.userinfo.token);
					// #endif
					this.getUserinfo();
				});
			},
			// 获取用户信息
			getUserinfo(){
				this.$H.post('api/user/getUserInfo', {}).then(res => {
					this.$store.commit('userInfo', res);
					setTimeout(()=>{
						let pages = getCurrentPages(); // 当前页面路由
						if(pages[pages.length - 2] && pages[pages.length - 2].route){
							// 返回上一页
							uni.navigateBack({
								delta: 1
							});
						}else{
							
						}
					},800)
					uni.showToast({
						title: '注册成功',
					})
				});
			},
			getCode() {
				// register
				if(this.$refs.uCode.canGetCode) {
					let eventType = 'bindmobile';//微信小程序使用
					// #ifndef MP-WEIXIN
						eventType = 'register'
					// #endif
					console.log('eventType',eventType)
					if (!this.mobile) {
						uni.showToast({
							title:'请输入电话',
							icon:'none'
						})
						return;
					}
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
					this.$H.post('api/sms/send', {mobile:this.mobile,event:eventType}).then(res => {
						uni.showToast({
							title:'验证码已发送',
							icon:'none'
						})
					},rej =>{});
				} else {
					uni.showToast({
						title:'倒计时结束后再发送',
						icon:'none'
					})
				}
			},
			end() {
				
			},
			start() {
				
			},
			/**
			 * 限制频繁点击
			 */
			limitClickFun(){
				if (this.limitclick) {
					return true;
				}
				this.limitclick = true;
				setTimeout(()=> {
					this.limitclick = false;
				}, 5000)
				return false;
			}
		}
	}
</script>
<style lang="scss">
	.code-btn{
		button{
			background-color: #fff  !important;
			border: none !important;
			font-size: 32rpx  !important;
			font-family: PingFang SC-Regular, PingFang SC;
			color: #0E54A4  !important;
		}
	}
</style>
<style lang="scss" scoped>
	.register{
		padding: 90rpx 48rpx 20rpx;
		.register-logo{
			margin: 0 auto;
			width: 180rpx;
			height: 180rpx;
			image{
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.register-form{
			padding-top: 160rpx;
			.form-lis{
				height: 110rpx;
				margin-bottom: 30rpx;
				input{
					height: 110rpx;
				}
			}
		}
		.register-btn{
			width: 654rpx;
			height: 98rpx;
			background-color: #BBBBBB;
			border-radius: 98rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			margin: 136rpx auto 20rpx;
			&.active{
				background-color: #0E54A4;
			}
		}
	}
</style>
